<template>
    <div class="user-add" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title"> 添加用户</span>
            </div>
            <div class="form-database-form">


                <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
                    <div class="form-left">
                        <el-form-item label="头像" prop="avatar" class="custom-label">
                            <e-upload-image v-model="form.avatar" class="custom-upload-image"></e-upload-image>
                        </el-form-item>
                    </div>
                    <div class="form-right">
                        <el-form-item label="用户名:" prop="username" required
                            :rules="[{ required: true, message: '请填写用户名' }, { validator: rule.checkRemote, message: '已存在', checktype: 'insert', module: 'user', col: 'username', trigger: 'blur' }]">
                            <el-input placeholder="输入用户名" style="width:250px;" v-model="form.username" />
                        </el-form-item>

                        <el-form-item label="密码:" prop="password" required
                            :rules="[{ required: true, message: '请填写密码' }]">
                            <el-input placeholder="输入密码" style="width:250px;" v-model="form.password" />
                        </el-form-item>

                        <el-form-item label="姓名:" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
                            <el-input placeholder="输入姓名" style="width:250px;" v-model="form.name" />
                        </el-form-item>

                        <el-form-item label="性别:" prop="sex">
                            <el-select v-model="form.sex">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="手机:" prop="telephone"
                            :rules="[{ validator: rule.checkPhone, message: '请输入正确手机号码' }]">
                            <el-input placeholder="输入手机" style="width:250px;" v-model="form.telephone" />
                        </el-form-item>

                        <el-form-item label="身份证:" prop="identification"
                            :rules="[{ validator: rule.checkCard, message: '请输入有效身份证号码' }]">
                            <el-input placeholder="输入身份证" style="width:250px;" v-model="form.identification" />
                        </el-form-item>

                        <el-form-item label="邮箱:" prop="email"
                            :rules="[{ required: true, type: 'email', message: '请输入正确邮箱地址' }]">
                            <el-input placeholder="输入邮箱" style="width:250px;" v-model="form.email" />
                        </el-form-item>

                        <el-form-item label="验证码:" prop="captcha"
                            v-if="$refs.formModel && $refs.formModel.fields[7] && $refs.formModel.fields[7].validateState"
                            :rules="[{ required: true, message: '请输入邮箱验证码' }]">
                            <el-row :gutter="10">
                                <el-col :span="12" :style="{ paddingLeft: '0' }">
                                    <el-input placeholder="输入邮箱验证码" v-model="form.captcha" />
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="sendVerificationCode" type="primary"
                                        style="background-color: #fafafa; color: #555; font-size: 12px; padding: 12px; text-align: center; cursor: pointer; ">
                                        发送验证码
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>

                        <el-form-item v-if="btnText">
                            <el-button type="primary" @click="submit"
                                style="margin-left: 391px; letter-spacing: 2px; font-size: 16px; font-weight: bold;">{{
                                    btnText }}</el-button>
                        </el-form-item>
                    </div>
                </el-form>

            </div>
        </el-card>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
.user-add {
    .form-database-form {
        display: flex;
        justify-content: space-between;
        padding: 17px 83px 4px;
        margin: -17px 40px;

        //border: 2px solid #ccc; /* 边框样式 */
        //border-radius: 20px;
        //background: linear-gradient(to bottom, #f4f8f9, #d1d1d1, #110f0f); /* 渐变背景色 */
        //background-color:#f4f8f9;
        ::v-deep .el-form-item__label {
            font-weight: bold;
            font-size: 17px;
        }

        ::v-deep .el-select>.el-input {
            width: 250px;
        }
    }

    .form-left {
        width: 33%;
        margin-top: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #ccc;
        /* 边框样式 */
        border-radius: 20px;
        background-color: #f4f8f9;

        .custom-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: -184px;
            margin-top: 20px;
        }
    }

    .form-right {
        margin-left: 322px;
        margin-top: -360px;

        ::v-deep .el-form-item {
            //margin: 0;
        }

    }

    ::v-deep .avatar-uploader .el-upload .el-upload-dragger {
        width: 200px;
        height: 200px;


        .el-icon-plus.avatar-uploader-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
    }

    ::v-deep .avatar-uploader .el-upload .el-upload-dragger .avatar {
        width: 200px;
        height: 200px;
        display: block;
    }

    .title {
        color: #5891aa;
        font-size: 18px;
        font-weight: bold;
    }
}
::v-deep .el-button--primary {
    color: #FFFFFF;
    background-color: #7fabbe;
    border-color: #7fabbe;
}
</style>
<script>
import api from '@/api'
import rule from '@/utils/rule'
import { extend } from '@/utils/extend'


export default {
    name: 'user-add',
    data() {
        return {
            rule,
            loading: false,
            form: {
                username: '',
                password: '',
                name: '',
                sex: '',
                telephone: '',
                email: '',
                identification: '',
                avatar: '',
                captcha: '',
            },
            isEmailValid: true,
        }
    },
    watch: {},
    props: {
        isRead: {
            type: Boolean,
            default: true
        },
        btnText: {
            type: String,
            default: '提交'
        },
    },

    computed: {

    },
    methods: {
        submit() {
            this.$refs.formModel.validate().then(res => {
                if (this.loading) return;
                this.loading = true;
                var form = this.form;

                this.$post(api.user.insert, form).then(res => {
                    this.loading = false;
                    if (res.code == api.code.OK) {
                        this.$emit('success', res.data);
                        this.$refs.formModel.resetFields();
                        this.loadInfo();
                        // 跳转到登录页面
                        this.$router.push({ path: '/login' });
                        this.$message.success('注册成功，请登录');
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                })

            }).catch(err => {
                console.log(err.message);
            })

        },
        loadInfo() {
            var form = this.form;
            // 获取模块得数据
            this.loading = true;
            this.$post(api.user.create, {
                id: this.$route.query.id
            }).then(res => {
                this.loading = false;
                if (res.code == api.code.OK) {
                    extend(this, res.data);
                } else {
                    this.$message.error(res.msg);
                    this.$router.go(-1);
                }
            }).catch(err => {
                this.$message.error(err.message);
                this.$router.go(-1);
            });
        },
        sendVerificationCode() {
            console.log(this.form.email);
            this.$post(api.sendemail, { email: this.form.email }).then(res => {
                console.log(res);
                this.$message.success('发送成功，请查收');
            }).catch(err => {
                this.$message.error(err.message);
            })
        }
    },
    created() {
        this.loadInfo();
    },
    mounted() {
    },
    destroyed() {
    }
}
</script>
